import React from "react";

function Dialog(props) {
  const messages = {
    foo: { title: "foo", content: "foo~" },
    bar: { title: "bar", content: "bar~" },
  };
  console.log(messages[props.msg]);
  const { def, footer } = props.children(messages[props.msg]);

  // children代表了标签内部的内容（匿名插槽）
  // children就是一个合法的js表达式
  return (
    <div style={{ border: "1px solid red" }}>
      {def} <div>{footer}</div>
    </div>
  );
}

function RadioGroup(props) {
  return (
    <div>
      {React.Children.map(props.children,radio => {
        {/* 要修改虚拟dom，只能克隆 */}
        {/* 参数1：克隆对象，参数2：属性设置 */}
        return React.cloneElement(radio,{name:props.name})
      })}
    </div>
  )
}

function Radio({children, ...rest}) {
  return (
    <label>
      <input type="radio" {...rest} /> {children}
    </label>
  );
}

const Composition = () => {
  return (
    <div>
      <Dialog msg="foo">
        {({ title, content }) => ({
          def: (
            <>
              <h1>{title}</h1>
              <p>{content}</p>
            </>
          ),
          footer: (
            <button
              onClick={() => {
                alert("clicked");
              }}
            >
              click me
            </button>
          ),
        })}
      </Dialog>
      <RadioGroup name="fenzu">
        <Radio value="vue">vue</Radio>
        <Radio value="react">react</Radio>
        <Radio value="angular">angula</Radio>
      </RadioGroup>
    </div>
  );
};

export default Composition;
